<template>
  <div class="search-list-lay" >
    <TableHeaderWidget :header="props.title"/>
    <TableWidget ref="refTable" :pagination="pagination" :columns="props.columns" :load="props.loadData"
                 :has-select="false" :hide-pageable="props.hidePageable" style="flex: 1">
      <template v-slot:toolHeader>
        <TableSearchWidget ref="refSearch" :search="props.searchForm">
          <template v-slot:searchTail>
            <el-button icon="search" plain round style="padding: 0 20px;" @click="searchData"/>
          </template>
        </TableSearchWidget>
      </template>
      <template v-slot:actionBefore>
        <slot name="actionBefore"/>
      </template>
    </TableWidget>
  </div>

</template>

<script setup lang="ts" name="realmUserGroup">

import {onMounted, ref} from "vue";

import TableSearchWidget from "@/widget/TableSearchWidget.vue";
import TableWidget from "@/widget/TableWidget.vue";
import TableHeaderWidget from "@/widget/TableHeaderWidget.vue";

const refTable = ref();
const refSearch = ref();

const props = withDefaults(defineProps<{
  title: string,
  columns: any,
  loadData?: any,
  searchForm?: any,
  hidePageable?: boolean,
}>(), {
  hidePageable: false,
});

const pagination = ref<Pagination>({
  current: 1,
  pageSize: 20,
  total: 0,
});

const refreshData = (params: any) => {
  refTable.value?.refreshData({
    ...params,
    ...refSearch.value?.getSearchParams()
  })
}

const searchData = () => {
  refreshData({});
}

onMounted(() => {
  searchData();
})

defineExpose({
  refreshData,
})

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

.search-list-lay {
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

</style>
